<template>
  <div>
    <a-date-picker
      mode="year"
      v-model="time"
      :open="isOpen"
      format="YYYY"
      v-bind="$attrs"
      @openChange="onOpenChange"
      @panelChange="onPanelChange"
      @change="onChange"
    ></a-date-picker>
  </div>
</template>

<script>
import { DatePicker } from 'ant-design-vue'
import { isEmpty } from '@/utils/util'
import moment from 'moment'
export default {
  components: {
    [DatePicker.name]: DatePicker
  },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    value: null
  },
  watch: {
    value: {
      immediate: true,
      handler (n, o) {
        if (isEmpty(n)) {
          this.time = null
        } else if (n._isAMomentObject) {
          this.time = n
        } else {
          this.time = moment().set('year', parseInt(n))
        }
      }
    }
  },
  data () {
    return {
      isOpen: false,
      time: null
    }
  },
  methods: {
    onOpenChange (state) {
      this.isOpen = state
    },
    onPanelChange (v) {
      this.time = v.format('YYYY')
      this.isOpen = false
      this.$emit('input', this.time)
      this.$emit('change', this.time)
    },
    onChange () {
      this.time = null
      this.$emit('input', this.time)
      this.$emit('change', this.time)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.ant-calendar-picker {
  width: 100%;
}
</style>
